<template>
  <div class="bgImg_box">
    <div class="common_show_btn">
      <div class="bgImg common_bg" @click="handleChangeBg">
        <el-image :src="imgUrl" fit="cover" v-if="imgUrl"></el-image>
        <div class="tips_wrap">
          <span class="name">{{ imgUrl ? "更换" : "去设置" }}</span>
        </div>
      </div>
      <div class="btn_operat">
        <span @click="handleDefault">默认</span>
        <span v-if="imgUrl" @click="handleClear">清除</span>
      </div>
    </div>
    <el-dialog
      :modal-append-to-body="false"
      :visible.sync="show"
      width="950px"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      @close="handleClose"
      custom-class="bgImg_wrap"
    >
      <div class="img_container">
        <div class="head_wrap">
          <div class="nav_wrap">
            <div
              @click="handleChangeHeadBanner(item.id)"
              :class="{ active: currentHeadId === item.id }"
              class="nav_item"
              v-for="(item, index) in bannerHeadList"
              :key="index"
            >
              <span>{{ item.name }}</span>
            </div>
          </div>
          <div class="upload_wrap">
            <el-upload
              class="upload-demo"
              :on-success="handleSuccess"
              :before-upload="beforeUpload"
              :headers="headers"
              name="multipartFile"
              :multiple="false"
              :action="cfg.baseUrl + '/resource/upload?type=BG_IMAGE'"
              :show-file-list="false"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </div>
        </div>
        <div style="height: 500px">
          <template v-if="resourceList.length">
            <ul
              class="infinite-list"
              v-infinite-scroll="loadResource"
              style="overflow: auto"
              :infinite-scroll-disabled="disabled"
            >
              <li
                class="resource_item"
                v-for="(ele, i) in resourceList"
                :key="i"
              >
                <div
                  class="img_wrap"
                  :style="{ backgroundImage: 'url(' + ele.link + ')' }"
                  @click="handleSelect(ele.link)"
                >
                  <div v-if="ele.checked" class="currentUse">当前使用</div>
                </div>
              </li>
            </ul>
          </template>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import cfg from "@/config";
import { LgetItem } from "@/utils/storage";
export default {
  props: {
    bgImg: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      cfg,
      show: false,
      query: {
        pageNum: 1,
        pageSize: 20,
        tagId: null,
        type: "BG_IMAGE",
        userId: 0,
      },
      disabled: false,
      imgUrl: "",
      headers: { Token: LgetItem("jwtToken") },
      bannerHeadList: [],
      currentHeadId: 0,
      resourceList: [],
    };
  },
  created() {
    // this.currentHeadId = this.bannerHeadList[0].id;
  },
  watch: {
    bgImg: function (val) {
      this.imgUrl = val;
    },
  },
  methods: {
    //点击head找到对应的图片资源
    handleChangeHeadBanner(id) {
      this.currentHeadId = id;
      //修改id
      this.resourceList = [];
      this.query.tagId = id; //id
      this.query.pageNum = 1;
      this.disabled = false;
      this.loadResource();
    },
    handleChangeBg() {
      this.getResourceTag();
    },
    //获取资源标签
    getResourceTag() {
      this.$api("resource.getResourceTag", {
        type: "BG_IMAGE",
      }).then((res) => {
        console.log(res);
        this.bannerHeadList = res;
        this.bannerHeadList.unshift({
          name: "全部",
          id: "",
        });
        this.currentHeadId = this.bannerHeadList[0].id;
        this.show = true;
        this.loadResource();
      });
    },
    //设为默认
    handleDefault() {
      this.imgUrl = "";
      this.$emit("handleBgDefault");
    },
    //已有图，进行清除
    handleClear() {
      this.imgUrl = "";
      this.$emit("handleBgDefault");
    },
    handleClose() {
      this.resourceList = [];
      this.query.pageNum = 1;
      this.disabled = false;
    },
    loadResource() {
      this.getResourceBanner();
    },
    //获取资源图片
    getResourceBanner() {
      this.$api("resource.getResource", this.query).then((res) => {
        this.resourceList.push(...res.data);
        if (res.data.length >= this.query.pageSize) {
          //就不能再+1了
          this.query.pageNum++;
        } else {
          this.disabled = true;
        }
        this.resourceList.forEach((ele) => {
          if (this.imgUrl === ele.link) {
            ele.checked = true;
          }
        });
      });
    },
    //轮播图
    handleSuccess(res, file) {
      console.log(file);
      console.log(res);
      // this.resourceList.unshift({
      //   link: res.data,
      // });
      this.$emit("handleBg", res.data);
      this.show = false;
    },
    beforeUpload(file) {
      console.log(file);
      return true;
    },
    handleSelect(link) {
      this.imgUrl = link;
      this.show = false;
      this.$emit("handleBg", link);
    },
  },
};
</script>
<style lang="scss" scoped>
.bgImg_box {
  ::v-deep.bgImg_wrap {
    margin: 0;
    margin-left: 600px;
  }
  ::v-deep.el-dialog__header {
    padding: 0;
  }
  ::v-deep.el-dialog__body {
    padding: 30px 0;
  }
}
.common_show_btn {
  display: flex;
  align-items: center;

  .btn_operat {
    margin-left: 40px;
    span {
      display: inline-block;
      padding: 0 10px;
      color: $themeColor;
      cursor: pointer;
    }
  }

  .common_bg {
    position: relative;
    background-color: #f5f5f5;
    cursor: pointer;
    border-radius: 8px;
    .el-image {
      width: 100%;
      height: 100%;
      border-radius: 8px;
      img {
        border-radius: 8px;
      }
    }
    .tips_wrap {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      z-index: 6;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      background: rgba(0, 0, 0, 0);
      opacity: 0;
      &:hover {
        opacity: 1;
        background: rgba(0, 0, 0, 0.5);
        .name {
          color: $themeColor;
          font-size: 13px;
        }
      }
    }
  }
  .bgImg {
    width: 73px;
    height: 160px;
  }
}
.img_container {
  background: #f5f6f8;
  .head_wrap {
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    .nav_wrap {
      flex: 1;
      display: flex;
      .nav_item {
        padding: 5px 20px;
        font-weight: 500;
        font-size: 15px;
        cursor: pointer;
        &.active {
          color: $themeColor;
        }
      }
    }
    .upload_wrap {
      padding-right: 40px;
    }
  }
  .infinite-list {
    height: 500px;
    padding: 20px 0 0 20px;
    .resource_item {
      display: inline-block;
      width: 160px;
      height: 160px;
      cursor: pointer;
      margin-right: 20px;
      margin-bottom: 20px;
      background-color: #fff;
      .img_wrap {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background-size: contain;
        // 如果您仅规定了一个关键词，那么第二个值将是"center"。
        background-position: top;
        background-repeat: no-repeat;

        .currentUse {
          position: absolute;
          left: -24px;
          top: 10px;
          background-color: #29cc7a;
          color: #fff;
          z-index: 2;
          font-size: 11px;
          text-align: center;
          padding: 5px 20px;
          transform: rotate(-45deg);
          line-height: 1;
        }
      }
    }
  }
}
</style>